<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :xs="24" :md="12" :xl="6">
        <el-card class="box-card" shadow="hover">
          <el-avatar shape="square" icon="el-icon-user-solid" size="large" src="" />
          <el-form ref="form" :model="userInfo" size="mini" label-width="80px">
            <el-form-item label="姓名" class="userItem">
              <div>{{ userInfo.name }}</div>
            </el-form-item>
            <el-form-item label="id" class="userItem">
              <div>{{ userInfo.id }}</div>
            </el-form-item>
            <el-form-item label="租户id" class="userItem">
              <div>{{ userInfo.tenantId }}</div>
            </el-form-item>
            <el-form-item label="手机号" class="userItem">
              <div>{{ userInfo.phoneNumber }}</div>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import auth from '@/lib/directives/auth';

export default {
  name: 'Dashboard',
  directives: {
    auth
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['name']),
    ...mapState({ userInfo: state => state.user.info })
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.userItem {
  margin-bottom: 0;
}
</style>
